
import { useState } from 'react';
import { Users, UserPlus, Shield, Search, Edit, Trash2, MoreHorizontal } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';

export default function UserManagement() {
  const [searchTerm, setSearchTerm] = useState('');
  const [roleFilter, setRoleFilter] = useState('all');
  const [users] = useState([
    { id: 1, name: '张三', email: 'zhangsan@example.com', role: 'admin', status: 'active', lastLogin: '2023-11-01 10:30' },
    { id: 2, name: '李四', email: 'lisi@example.com', role: 'operator', status: 'active', lastLogin: '2023-11-01 09:15' },
    { id: 3, name: '王五', email: 'wangwu@example.com', role: 'viewer', status: 'inactive', lastLogin: '2023-10-28 14:20' },
    { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: 'operator', status: 'active', lastLogin: '2023-11-01 11:45' },
    { id: 5, name: '孙七', email: 'sunqi@example.com', role: 'viewer', status: 'active', lastLogin: '2023-10-31 16:30' },
  ]);

  const filteredUsers = users.filter(user => {
    const matchesSearch = user.name.includes(searchTerm) || user.email.includes(searchTerm);
    const matchesRole = roleFilter === 'all' || user.role === roleFilter;
    return matchesSearch && matchesRole;
  });

  const getRoleColor = (role: string) => {
    switch (role) {
      case 'admin': return 'bg-red-500/20 text-red-400';
      case 'operator': return 'bg-blue-500/20 text-blue-400';
      case 'viewer': return 'bg-green-500/20 text-green-400';
      default: return 'bg-gray-500/20 text-gray-400';
    }
  };

  const getStatusColor = (status: string) => {
    return status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400';
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">用户管理</h2>
          <p className="text-gray-400">系统用户与权限管理</p>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button className="btn-primary">
              <UserPlus className="w-4 h-4 mr-2" />
              添加用户
            </Button>
          </DialogTrigger>
          <DialogContent className="glass-card">
            <DialogHeader>
              <DialogTitle className="text-white">添加新用户</DialogTitle>
            </DialogHeader>
            <div className="space-y-4 pt-4">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">用户名</label>
                <Input className="input-advanced" placeholder="输入用户名" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">邮箱</label>
                <Input className="input-advanced" type="email" placeholder="输入邮箱地址" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">角色</label>
                <Select>
                  <SelectTrigger className="input-advanced">
                    <SelectValue placeholder="选择角色" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="viewer">查看者</SelectItem>
                    <SelectItem value="operator">操作员</SelectItem>
                    <SelectItem value="admin">管理员</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex space-x-2 pt-4">
                <Button className="btn-primary flex-1">创建用户</Button>
                <Button variant="outline" className="flex-1">取消</Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {/* Statistics */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-white">{users.length}</div>
              <div className="text-sm text-gray-400">总用户数</div>
            </div>
            <Users className="w-8 h-8 text-blue-400" />
          </div>
        </Card>
        
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-green-400">
                {users.filter(u => u.status === 'active').length}
              </div>
              <div className="text-sm text-gray-400">活跃用户</div>
            </div>
            <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
              <div className="w-4 h-4 bg-white rounded-full"></div>
            </div>
          </div>
        </Card>
        
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-red-400">
                {users.filter(u => u.role === 'admin').length}
              </div>
              <div className="text-sm text-gray-400">管理员</div>
            </div>
            <Shield className="w-8 h-8 text-red-400" />
          </div>
        </Card>
        
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-purple-400">
                {users.filter(u => u.lastLogin.includes('2023-11-01')).length}
              </div>
              <div className="text-sm text-gray-400">今日登录</div>
            </div>
            <div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
              <div className="w-4 h-4 bg-white rounded-full"></div>
            </div>
          </div>
        </Card>
      </div>

      {/* Filters */}
      <Card className="glass-card p-6">
        <div className="flex flex-col md:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                className="input-advanced pl-10"
                placeholder="搜索用户名或邮箱..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <Select value={roleFilter} onValueChange={setRoleFilter}>
            <SelectTrigger className="input-advanced w-full md:w-40">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">所有角色</SelectItem>
              <SelectItem value="admin">管理员</SelectItem>
              <SelectItem value="operator">操作员</SelectItem>
              <SelectItem value="viewer">查看者</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </Card>

      {/* User List */}
      <Card className="glass-card p-6">
        <h3 className="text-lg font-semibold mb-4 text-white">用户列表</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-700">
                <th className="text-left py-3 text-gray-400">用户</th>
                <th className="text-left py-3 text-gray-400">角色</th>
                <th className="text-left py-3 text-gray-400">状态</th>
                <th className="text-left py-3 text-gray-400">最后登录</th>
                <th className="text-left py-3 text-gray-400">操作</th>
              </tr>
            </thead>
            <tbody>
              {filteredUsers.map((user) => (
                <tr key={user.id} className="border-b border-gray-800 hover:bg-white/5">
                  <td className="py-3">
                    <div>
                      <div className="font-medium text-white">{user.name}</div>
                      <div className="text-gray-400">{user.email}</div>
                    </div>
                  </td>
                  <td className="py-3">
                    <Badge className={getRoleColor(user.role)}>
                      {user.role === 'admin' ? '管理员' : 
                       user.role === 'operator' ? '操作员' : '查看者'}
                    </Badge>
                  </td>
                  <td className="py-3">
                    <Badge className={getStatusColor(user.status)}>
                      {user.status === 'active' ? '活跃' : '离线'}
                    </Badge>
                  </td>
                  <td className="py-3 text-gray-300">{user.lastLogin}</td>
                  <td className="py-3">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreHorizontal className="w-4 h-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent className="glass-card">
                        <DropdownMenuItem className="text-gray-300 hover:text-white">
                          <Edit className="w-4 h-4 mr-2" />
                          编辑
                        </DropdownMenuItem>
                        <DropdownMenuItem className="text-red-400 hover:text-red-300">
                          <Trash2 className="w-4 h-4 mr-2" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      {/* Permissions */}
      <Card className="glass-card p-6">
        <h3 className="text-lg font-semibold mb-4 text-white">权限管理</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="space-y-3">
            <h4 className="font-medium text-green-400">查看者权限</h4>
            <ul className="space-y-2 text-sm text-gray-300">
              <li>• 查看音频采集数据</li>
              <li>• 查看信号处理结果</li>
              <li>• 查看特征提取报告</li>
              <li>• 查看系统状态</li>
            </ul>
          </div>
          
          <div className="space-y-3">
            <h4 className="font-medium text-blue-400">操作员权限</h4>
            <ul className="space-y-2 text-sm text-gray-300">
              <li>• 所有查看者权限</li>
              <li>• 启动/停止音频采集</li>
              <li>• 配置信号处理参数</li>
              <li>• 执行特征提取任务</li>
              <li>• 导出分析报告</li>
            </ul>
          </div>
          
          <div className="space-y-3">
            <h4 className="font-medium text-red-400">管理员权限</h4>
            <ul className="space-y-2 text-sm text-gray-300">
              <li>• 所有操作员权限</li>
              <li>• 用户管理</li>
              <li>• 系统配置</li>
              <li>• 数据库管理</li>
              <li>• 系统维护</li>
            </ul>
          </div>
        </div>
      </Card>
    </div>
  );
}
